<template>
	<view>
		<!--    搜索框，功能暂未实现-->
		<input type="text" class="search" placeholder="请输入考试名称" @keydown.enter="searchTestList" v-model="testName" />
		<!--    v-for循环遍历将所有考试信息显示-->
		<view v-for="(item,index) in testLists" :key="index">
			<view class="testInformation" @click="clickTestList(item,index)">
				<!--        待开始状态-->
				<view v-if="testStatusList[index]==0" class="hadComplete">
					<img style="padding-top:12rpx" src="static/icons/waitComplete.png">
				</view>
				<!--          进行中状态-->
				<view v-if="testStatusList[index]==1" class="hadComplete">
					<img style="padding-top:12rpx" src="static/icons/testing.png">
				</view>
				<!--        未批改状态-->
				<view v-if="testStatusList[index]==2" class="hadComplete">
					<img style="padding-top:12rpx; width:55rpx" src="static/icons/unFinished.png">
				</view>
				<!--        已批改状态-->
				<view v-if="testStatusList[index]==3" class="hadComplete">
					<img style="padding-top:4rpx" src="static/icons/hadFinished.png">
				</view>
				<!--      渲染上考试时间和考试名-->
				<view class="testNameAndTime">
					<view>{{item.testName}}</view>
					<view>{{item.beginTime}}</view>
				</view>
				<!--      是否结束-->
				<view v-if="testStatusList[index]==0" class="isFinished">待开始
				</view>
				<view v-if="testStatusList[index]==1" class="isFinished">进行中
				</view>
				<view v-if="testStatusList[index]==2" class="isFinished">未批改
				</view>
				<view v-if="testStatusList[index]==3" class="isFinished">已批改
				</view>
			</view>
			<!--      一个虚线的分割线-->
			<u-line color="rgb(236, 240, 241)" />
		</view>
		<!--    调用了uview框架里面的一个弹窗组件-->
		<u-popup :mask="false" :mask-close-able="false" v-model="show" mode="center" class="popup" :border-radius="20"
			:negative-top="120" width="80%" height="30%">
			<!--      弹窗页面-->
			<view class="topBar">进入考试
			</view>
			<u-line color="rgb(236, 240, 241)" />
			<!--       输入栏界面-->
			<view class="inputPage">
				<ul class="inputList">
					<li>
						<input v-model="textData.testCode" class="addInformation" placeholder="请输入考试码" />
					</li>
				</ul>
			</view>
			<!--      弹窗底部的两个按钮-->
			<view class="bottomBar">
				<button @click="close()" class="buttonFont">取消
				</button>
				<button class="buttonFont" @click="waitTestStart()" style="font-weight: bold">进入考场
				</button>
			</view>
		</u-popup>
		<!--    弹窗显示模糊搜索的结果点击将结果写入输入框中-->
		<u-popup v-model="show2" mode="bottom" :mask="false" width="80%" height="30%">
			<view v-for="(item,index) in list" :key="index">
				<view class="searchList" @click="getMajorClass(index)">{{item.label}}</view>
				<u-line color="rgb(236, 240, 241)" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getTestInformations,
		getTestListByName,
		filetestRoom
	} from "../../api/file";
	import UPopup from "@/components/uview-ui/components/u-popup/u-popup.vue";

	export default {
		components: {
			UPopup
		},
		data() {
			return {
				token: uni.getStorageSync('token'),
				customStyle: 'border: 2px solid #3498DB;',
				testLists: [], //存储考试列表数据
				testName: "", //搜索框动态绑定的考试名
				// testMsg:"",
				textData: { //添加考试的动态绑定属性
					testCode: '',
					studentName: '',
					studentNumber: '',
					majorClass: ''
				},
				show2: false,
				show: false,
				list: [{
					label: ''
				}],
				// major: [{
				// 		label: '计算机科学与技术1班'
				// 	},
				// 	{
				// 		label: '计算机科学与技术2班'
				// 	},
				// 	{
				// 		label: '计算机科学与技术3班'
				// 	},
				// 	{
				// 		label: '计算机科学与技术4班'
				// 	},
				// 	{
				// 		label: '计算机科学与技术5班'
				// 	},
				// 	{
				// 		label: '计算机科学与技术6班'
				// 	},
				// 	{
				// 		label: '大数据与人工智能1班'
				// 	},
				// 	{
				// 		label: '大数据与人工智能2班'
				// 	},
				// 	{
				// 		label: '大数据与人工智能3班'
				// 	},
				// 	{
				// 		label: '信息安全1班'
				// 	},
				// 	{
				// 		label: '信息安全2班'
				// 	},
				// 	{
				// 		label: '信息安全3班'
				// 	},
				// 	{
				// 		label: '物联网工程1班'
				// 	},
				// 	{
				// 		label: '物联网工程2班'
				// 	},
				// 	{
				// 		label: '软件工程1班'
				// 	},
				// 	{
				// 		label: '软件工程2班'
				// 	}
				// ],
				isGo: false,
				testStatusList:[],//考试状态列表
			};
		},
		methods: {
			//系统自带的点击顶部按钮时会执行的函数，作用是打开弹窗
			onNavigationBarButtonTap(e) {
				this.show = true;
			},
			//关闭弹窗
			close() {
				this.show = false;
			},
			//点击考试列表项，跳转页面
			clickTestList(item,index) {
				// 点击考试已批改列表项
				if (this.testStatusList[index] == 3) {
					uni.setStorageSync("testCode", item.testId); //将该考试的testId存储到缓冲区内
					const testCode = item.testId;
					const studentNum = uni.getStorageSync("studentNum"); //取出在login页面保存好的学号
					const msg = {
						testCode,
						studentNum
					};
					filetestRoom(msg).then(res => { //调用此接口获取paperId
						if (res.data.code === 200) {
							uni.setStorageSync("paperId", res.data.data.testMsg.paperMsg.paperid); //保存在缓冲区中
							uni.navigateTo({ //跳转到考试详情页面
								url: "../testDetail/testDetail"
							})
						} else {
							uni.showToast({
								title: "请确认学生信息与考试匹配！",
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
				//点击考试待开始和进行中列表项
				else if (this.testStatusList[index] == 0 || this.testStatusList[index] == 1) {
					uni.setStorageSync("testCode", item.testId); //将该考试的testId存储到缓冲区内
					uni.navigateTo({
						url: "../testRoom/testRoom"
					})
				}
				//点击考试未批改列表项
				else if (this.testStatusList[index] == 2) {
					uni.setStorageSync("testCode", item.testId); //将该考试的testId存储到缓冲区内
					const testCode = item.testId;
					const studentNum = uni.getStorageSync("studentNum"); //取出在login页面保存好的学号
					const msg = {
						testCode,
						studentNum
					};
					filetestRoom(msg).then(res => { //调用此接口获取paperId
						if (res.data.code === 200) {
							//console.log("未批改",res.data.data.testMsg);
							uni.setStorageSync("paperId", res.data.data.testMsg.paperMsg.paperid); //保存在缓冲区中
							uni.navigateTo({
								url: "../testSuccess/testSuccess"
							})
						} else {
							uni.showToast({
								title: "请确认学生信息与考试匹配！",
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			// //将模糊化搜索的结果显示
			// showList() {
			// 	if (this.textData.majorClass === '') {
			// 		//this.list是下拉框显示的内容，如果为空就展示全部数据
			// 		this.list = this.major
			// 		//否则执行下面内容
			// 	}
			// 	this.show2 = true;
			// },
			// //将点击之后的值赋给majorClass
			// getMajorClass(index) {
			// 	this.textData.majorClass = this.list[index].label;
			// 	this.show2 = false;
			// },
			// // 模糊搜索
			// inputes() {
			// 	//首先判断输入框是否为空
			// 	if (this.textData.majorClass === '') {
			// 		//this.list是下拉框显示的内容，如果为空就展示全部数据
			// 		this.list = this.major
			// 		//否则执行下面内容
			// 	} else {
			// 		//先清空展示的数据
			// 		this.list = []
			// 		//然后开始循环全部数据
			// 		for (var i = 0; i < this.major.length; i++) {
			// 			//判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合
			// 			if (this.major[i].label.indexOf(this.textData.majorClass) >= 0) {
			// 				//console.log(this.major[i].label)
			// 				//然后把它丢进要展示的数组里面
			// 				this.list.push(this.major[i])
			// 				//我这里是必选项为防止用户不选择判断如有数据默认第一个
			// 				if (this.list.length != 0) {
			// 					//在用户选择下拉框内容时会被替换掉
			// 					this.textData.majorClass = this.list[0].label
			// 				}
			// 			}
			// 		}
			// 	}
			// },
			//调用接口添加考试进入考试页面
			waitTestStart() {
				const testCode = this.textData.testCode;
				const studentNum = this.textData.studentNumber;
				const msg = {
					studentNum: uni.getStorageSync("studentNum"),
					testCode
				};
				filetestRoom(msg).then(res => {
					if (res.data.code === 200) {
						//console.log("testList根据名字拿到考试列表", res);
						uni.setStorageSync("paperId", res.data.data.testMsg.paperMsg.paperid); //保存在缓冲区中
						uni.setStorageSync("testCode", testCode); //将拿到的testCode，studentNum，放入uniApp的缓冲区，防止刷新消失
						uni.navigateTo({
							url: "../testRoom/testRoom"
						})
					} else {
						uni.showToast({
							title: "请检查考试码是否正确！",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 通过考试名字得到考试列表
			searchTestList() {
				//console.log(this.testName);
				if (this.testName === "") { //如果搜索框里内容为空，显示默认考试列表
					this.GetTestInformations({
						token: uni.getStorageSync('token'),
						classId: uni.getStorageSync('classId')
					});
				} else { //否则根据考试名字进行搜索，将搜索到的考试列表信息添加到已有的考试列表信息
					getTestListByName({
						token: this.token,
						testName: this.testName
					}).then(res => {
						if (res.data.code === 200) {
							//console.log("testList根据名字拿到考试列表", res);
							this.testLists = res.data.data.testList;
						} else {
							uni.showToast({
								title: "请检查token和考试名称是否正确",
								icon: 'none',
								duration: 2000
							})
						}
					})
				}

			},
			//调用接口获取考试列表
			GetTestInformations(student) {
				getTestInformations(student).then(res => {
					//console.log("testList的页面获取考试列表的res", res);
					this.testLists = res.data.data.testList;
					//console.log("testList页面中是否保存好testLists", this.testLists);
					this.setTestStatus()
				})
			},
			//根据时间确定考试状态
			setTestStatus(){
				var date = new Date();
				var seperator1 = "-";
				var year1 = date.getFullYear();
				var month1 = date.getMonth() + 1;
				var hour1 = date.getHours();
				var minutes1 = date.getMinutes();
				var seconds1 = date.getSeconds();
				var strDate = date.getDate();
				
				if (month1 >= 1 && month1 <= 9) {
					month1 = "0" + month1;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentTime = year1 + seperator1 + month1 + seperator1 + strDate + "  " + hour1 + ":" + minutes1 +
					":" + seconds1;
				for (var i=0;i<this.testLists.length;i++){
					var date1 = new Date(currentTime); //当前时间
					var date2 = new Date(this.testLists[i].beginTime); //考试开始时间
					var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数,小于0表示超过考试时间
					// console.log("data3:", date3)
					// console.log("data1", date1)
					// console.log("data2", date2)
					//计算出相差天数
					var days = Math.floor(date3 / (24 * 3600 * 1000));
					//计算出小时数
					var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
					var hours = Math.floor(leave1 / (3600 * 1000));
					//计算相差分钟数
					var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
					var minutes = Math.floor(leave2 / (60 * 1000));
					//计算相差秒数
					var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
					var seconds = Math.round(leave3 / 1000);
					if (this.testLists[i].testStatus==0){
						if (date3>=0){
							this.testStatusList.push(0)//待开始
						}else if (date3<0){
							date3 = date1.getTime() - date2.getTime();
							//计算出相差天数
							var days = Math.floor(date3 / (24 * 3600 * 1000));
							//计算出小时数
							var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
							var hours = Math.floor(leave1 / (3600 * 1000));
							//计算相差分钟数
							var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
							var minutes = Math.floor(leave2 / (60 * 1000));
							//计算相差秒数
							var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
							var seconds = Math.round(leave3 / 1000);
							if (days > 0 || hours >= 2 || hours >= 1 && minutes > 40){
								this.testStatusList.push(2)//未批改
							}else{
								this.testStatusList.push(1)//进行中
							}
						}
					}else if (this.testLists[i].testStatus==1){
						this.testStatusList.push(3)//已批改
					}
				}
				//console.log("testStatusList",this.testStatusList);
			}
		},
		//监听页面左上的默认返回事件
		onBackPress(e) {
			//正常返回页面
			uni.redirectTo({
				url: "/pages/login/login"
			})
			return true;
		},
		onLoad() //监听页面加载  页面只要一重新加载便调用此函数
		{
			//加载考试列表
			this.GetTestInformations({
				token: uni.getStorageSync('token'),
				classId: uni.getStorageSync('classId')
			});
		}
	}
</script>

<style scoped>
	.search {
		font-size: 22px;
		color: black;
		text-align: center;
		border-radius: 30px;
		border: 2px solid #3498DB;
		padding: 3px 2px 3px 2px;
		height: 60px;
	}

	.testInformation {
		display: flex;
		width: 100%;
		height: 100rpx;
	}

	.hadComplete {
		height: 20%;
		width: 15%;
		text-align: center;
	}

	.testNameAndTime {
		height: 99%;
		width: 70%;
	}

	.isFinished {
		height: 99%;
		width: 15%;
		text-align: center;
		line-height: 100rpx;
		color: rgba(51, 51, 51, 0.647);
		font-size: 14px;
	}

	.popup {
		border: 1px solid rgba(236, 240, 241, 1);
	}

	.topBar {
		height: 20%;
		width: 100%;
		font-size: 20px;
		color:white;
		padding-top: 4%;
		padding-left: 5%;
		line-height: normal;
		background-color: #3498DB;
	}

	.inputPage {
		height: 50%;
		width: 100%;
		background-color: whitesmoke;
		padding: 2%;
	}

	.inputList {
		height: 100%;
		width: 100%;
		list-style: none;
	}

	.inputList li {
		height: 50%;
		width: 100%;
		text-align: center;
		line-height: normal;
	}

	.inputList input {
		padding: 4rpx 5%;
		text-align: left;
		font-size: 22px;
	}

	.addInformation {
		height: 65%;
		width: 70%;
		/* color: rgb(236, 240, 241); */
		border: 1.5px solid #3498DB;
		border-radius: 5px;
		font-size: 10px;
	}

	.buttonFont {
		height: 90%;
		width: 50%;
		color: rgb(52, 152, 219);
		background-color: white;
		font-size: 18px;
		background-color: whitesmoke;
		padding: 1%;
	}

	.bottomBar {
		height: 20%;
		width: 100%;
		display: flex;
	}

	.searchList {
		height: 50rpx;
		text-align: center;
		font-size: 14px;
	}
</style>
